<template>
<!--  左侧-->
  <el-container>
    <el-aside width="200px">
      <img src="../assets/loginBox.svg">
      <p class="imgTitle">
        欢迎使用动力云客
      </p>
    </el-aside>
<!--    右侧-->
    <el-main>
      <div class="loginText">欢迎登录</div>
      <el-form ref="loginRefFrom" :model="user" :rules="loginRules" label-width="120px">
        <el-form-item label="账号" prop="loginAct">
          <el-input placeholder="请输入账号" v-model="user.loginAct" />
        </el-form-item>

        <el-form-item label="密码" prop="loginPwd">
          <el-input type="password"  placeholder="请输入6到16位的密码" show-password v-model="user.loginPwd" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>

        <el-form-item>
          <el-checkbox label="记住我" v-model="user.rememberMe"/>
        </el-form-item>

      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import {doGet, doPost} from "../http/httpRequest.js";
import {getTokeName, messageTip, removeToken} from "../util/util.js";


export default {
  //组件名字
  name: "LoginView",
  //定义页面使用到的变量,定义初始值都是给空的
  data() {
    return {
      //对象变量定义，是{}
      user : {},
      //字符串变量定义是''
      //数字变量定义是0
      //数组变量定义是[]
      //list集合对象定义(对象数组),是[{}]

      //定义登陆表单地校验规则
      loginRules : {
        //定义账号的验证规则，规则可以有多个，用数组表示
        loginAct : [
          {required: true,message:"请输入登录账号",trigger:"blur"}
        ],
        //定义密码的验证规则，规则可以有多个，用数组表示
        loginPwd : [
          {required: true,message: "请输入登录密码",trigger: "blur"},
          {min: 6,max: 16,message: "登陆密码长度须在6到16位",trigger: "blur"}
        ]
      }
    }
  },
  //钩子函数(页面渲染dom元素后会触发调用该函数)
  mounted() {
    this.freeLogin();
  },
  //页面上需要使用的js函数，都在methods里编写定义
  methods:{
    //登录函数
    login() {
      //提交前要验证框的合法性
      this.$refs.loginRefFrom.validate((isValid) => {
        //isValid是验证后的结果，如果是true表示验证通过，否则未通过
        if (isValid){
          //验证通过，可以提交登录
          let formData = new FormData();
          formData.append("loginAct",this.user.loginAct);
          formData.append("loginPwd",this.user.loginPwd);
          formData.append("rememberMe",this.user.rememberMe);
          doPost("/api/login",formData).then( (resp) => {
              console.log(resp);
              if (resp.data.code === 200){
                //登陆成功提示
                messageTip("登陆成功","success");
                //删除历史存储的localStorage和sessionStorage已存储的token
                removeToken();
                //前端存储jwt
                if (this.user.rememberMe === true){
                  //点了记住我
                  window.localStorage.setItem(getTokeName(),resp.data.data);//resp.data相当于后端的R对象{msg,state,data}
                } else {
                  //没点记住我
                  window.sessionStorage.setItem(getTokeName(),resp.data.data);
                }
                //跳转到系统的主页面
                window.location.href = "/dashboard";
              } else {
                //登陆失败提示
                messageTip("登陆失败","error")
              }
            }
          )
        }
      })
    },
    //免登录函数
    freeLogin() {
      //看是否可以获得localStorage的token，若不为空，则是记住我了
      let token = window.localStorage.getItem(getTokeName());
      if (token){//token有值，不为空，以记住我方式登陆的
        doGet("/api/login/free",{}).then(resp => {
          if (resp.data.code === 200) {
            //token验证通过，支持免登录
            window.location.href = "/dashboard";
          }
        })

      }
    }
  }
}
</script>

<style scoped>
  .el-aside{
    background: #1a1a1a;
    width: 40%;
    text-align: center;
  }
  .el-main{
    height: calc(100vh);
  }
  img{
    height: 413px;
  }
  .imgTitle{
    color: #f9f9f9;
    font-size: 28px;
  }
  .el-form{
    width: 60%;
    margin: auto;
  }
  .loginText{
    text-align: center;
    margin-top: 100px;
    margin-bottom: 25px;
    font-weight: bold;
  }
  .el-button{
    width: 100%;
  }
</style>